<template>
  <van-nav-bar
    :title="(route.meta.title as string)"
    left-text="返回"
    left-arrow
    @click-left="router.go(-1)"
    @click-right="reload"
  >
    <template #right>
      <van-icon name="replay" />
    </template>
  </van-nav-bar>

  <div class="page-box">
    <div class="label">扫码</div>
    <van-button class="btn" @click="scanQrCode" type="primary" block>scanQrCode</van-button>
    <div class="label">电话</div>
    <van-button class="btn" @click="phoneCall" type="primary" block>phoneCall</van-button>
  </div>
</template>

<script lang="ts" setup>
  import { showConfirmDialog } from 'vant'
  import { ref } from 'vue'
  import { useRouter, useRoute } from 'vue-router'

  const router = useRouter()
  const route = useRoute()
  const result = ref('回调结果')

  function reload() {
    location.reload()
  }
  function phoneCall() {
    window.OhJSBridge.phoneCall('121')
  }

  async function scanQrCode() {
    let res = await window.OhJSBridge.scanQrCode()
    result.value = JSON.stringify(res)
    
    showConfirmDialog({
      title: '扫码结果',
      message: result.value,
      confirmButtonText: '确定'
    })
  }
</script>

<style lang="scss" scoped>
  // 006dff
  .page-box {
    padding-top: 10px;
  }

  .btn {
    margin-bottom: 20px;
  }

  .label {
    margin-bottom: 10px;
  }

  :deep(.van-tab__panel) {
    padding: 20px 30px;
  }

  :deep(.van-dialog__content) {
    padding: 10px 20px;
  }
</style>
